<template>
	<div class="customer" style="padding: 40px 20px 40px 0">
		<div style="width: 85%;" class="orderListFont">
			<el-row :span="24">
				<el-row>
					<el-col :span="24" style="margin-bottom:20px;">
						<span style="font-size: 18px;margin-left: 10px;color: #222222;">线上付>订单列表</span>
					</el-col>
				</el-row>
				<div style="background-color: #FFFFFF;padding-top: 22px;">
					<el-form :inline="true" :model="formInline" class="demo-form-inline" label-width="120px">
						<el-form-item label="支付方式:">
							<el-select v-model="formInline.payType" style="width: 120px;">
								<el-option label="全部" value=""></el-option>
								<el-option :label="item.text" :value="item.value" v-for="item in payWay"></el-option>
							</el-select>
						</el-form-item>
						<el-form-item>
							<el-select v-model="formInline.type" style="width: 120px;" @change="changeType">
								<el-option label="订单号" value="transferId"></el-option>
								<el-option label="支付流水号" value="serialNo"></el-option>
							</el-select>
							<el-input v-model="formInline.name" style="width: 150px;" :maxlength="50"></el-input>
						</el-form-item>
						<el-form-item label="买家用户名:">
							<el-input v-model="formInline.payUserName" style="width: 150px;"></el-input>
						</el-form-item>
						<br>
						<el-form-item label="下单时间:">
							<el-date-picker type="date" placeholder="开始时间" v-model="startTime" style="width:180px;"></el-date-picker>
							到
							<el-date-picker type="date" placeholder="结束时间" v-model="endTime" style="width:180px;"></el-date-picker>
						</el-form-item>
						
						<el-button type="primary" @click="fetchData(1)">查询</el-button>

					</el-form>
						</div>
				<el-tabs v-model="activeName"  @tab-click="handleClick">
					<el-tab-pane :label="'全部('+numberObj.countAllNum+')'" name="-1"></el-tab-pane>
					<el-tab-pane :label="'待评价('+numberObj.countNotEvaluateNum+')'" name="1"></el-tab-pane>
					<el-tab-pane :label="'已完成('+numberObj.countFinishNum+')'" name="2"></el-tab-pane>
				</el-tabs>
			</el-row>

		<el-table tooltip-effect="dark" :data="pageInfo.dtos" v-loading="table_loading" element-table_loading-text="加载中" stripe @sort-change='order'
		 style="width: 100%">
			<el-table-column show-overflow-tooltip label="订单号" prop='transferId'>
			</el-table-column>
			<el-table-column label="支付流水号" show-overflow-tooltip prop='serialNo'>
			</el-table-column>
			<el-table-column label="买家" prop='payUserName'>
			</el-table-column>
			<el-table-column prop='exchangeAmount' label="获得奖励券">
			</el-table-column>
			<el-table-column label="订单状态">
				<template scope="scope">
					<span>{{findState(scope.row.transferStat,orderState)}}</span>
				</template>
			</el-table-column>
			<el-table-column show-overflow-tooltip label="支付方式" prop='refundsId'>
				<template scope="scope">
					<span>{{ findWay(scope.row.payType) }}</span>
				</template>
			</el-table-column>
			<el-table-column show-overflow-tooltip prop="payTime" label="下单时间">
				<!-- <template scope="scope">
					<span>{{scope.row.payTime}}</span>
				</template> -->
			</el-table-column>
			<el-table-column label="订单总价" prop='payAmt'>
			</el-table-column>
			<el-table-column label="操作" width="100">
				<template scope="scope">
					<span class="pointer" v-if="scope.row.transferStat=='7'" @click="editGold(scope.row.transferId)">查看评价</span>
				</template>
			</el-table-column>
		</el-table>

		<el-tabs v-if="activeNameNew === '5'" v-model="activeNameNew" @tab-click="handleClick">
			<el-tab-pane label="待发货订单" name="first">
				<div style="background-color: #f4f5f6;">
					<div class="row" style="background-color: #f4f5f6;padding: 15px 15px 0 15px; width: 90%;">
						<div class="select" style="margin-top: 0;">
							<div>商品名称</div>
							<div>
								<el-input size="small" class="input1" style="margin-left: 10px;" v-model="formInline.goodName"></el-input>
							</div>

						</div>
						<div class="select" style="margin-top: 0;">
							<div>商品ID</div>
							<div>
								<el-input size="small" class="input1" style="margin-left: 10px;" v-model="formInline.goodId"></el-input>
							</div>
						</div>
						<div class="select" style="margin-top: 0;">
							<div>价格</div>
							<div>
								<el-input size="small" style="margin-left: 10px;width: 100px;" v-model="formInline.goodId"></el-input>
								——
								<el-input size="small" style="margin-left: 10px;width: 100px;" v-model="formInline.goodId"></el-input>
							</div>
						</div>
					</div>
					<div class="row" style="margin-left: 25px;padding-bottom: 15px;">
						<el-button type="primary" size="big" @click="fetchData(1)">查询</el-button>
						<el-button type="primary" size="big" plain @click="clear()">重置</el-button>
					</div>
				</div>
				<div style="height: 80px;line-height: 80px;">
					<img style="vertical-align: middle;" src="../../assets/icon_lantishi.png" alt="">
					<div style="vertical-align: middle;display: inline-block;">关闭订单前请先与买家沟通，确定后再次进行关闭订单操作，严重违规会受到平台处罚。</div>
				</div>
				<el-card class="box-card">
					<div>
						<div class="orderListHeader">
							<div style="margin-right: 25px;">
								订单号：111111111
							</div>
							<div>
								创建时间：2020-6-8
							</div>
						</div>
						<div class="orderListContent">
							<div class="contentLeft" style="padding: 20px 0;">
								<img style="width:81px;height:81px;vertical-align: middle;margin-right: 50px;margin-left: 20px;" src="../../../static/images/2.png" />
								<div style="color: #8A8A8A;width: 154px;font-size: 14px;">
									<p style="word-wrap: break-word;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;">陕西红富士苹果水果新鲜当季整箱10斤</p>
									<p>ID:93261632564</p>
								</div>
								<div style="margin: 0 100px;">
									¥ 20.80
								</div>
								<div style="">
									1
								</div>
							</div>

							<div style="border-left:0.5px solid #dcdcdc;">

							</div>
							<div class="contentRight">
								<div class="contentRightUserInfo">
									<div style="margin-right: 15px;">
										收货信息:
									</div>
									<div>
										<p>谢先生 18511852228</p>
										<p>浙江省杭州市拱墅区绿地中央广场13栋4层前台</p>
									</div>
								</div>
								<div class="contentRightUserInfo">
									<div style="margin-right: 15px;">
										物流信息:
									</div>
									<div>
										暂无
									</div>
								</div>

							</div>
						</div>
						<div style="text-align:right;margin-top: 20px;padding-right: 80px;">
							<el-button type="primary" plain size="big">关闭订单</el-button>
							<el-button type="primary" size="big">发货</el-button>
						</div>

					</div>

				</el-card>

			</el-tab-pane>
			<el-tab-pane label="已发货订单" name="second">已发货订单</el-tab-pane>
		</el-tabs>

		<div class="paginate">
			<el-pagination @current-change="handleCurrentChange" :current-page="pageInfo.pageNum" :page-size="pageInfo.pageSize"
			 layout="total, prev, pager, next, jumper" :total="pageInfo.count">
			</el-pagination>
		</div>

	</div>
	<!-- 查看评价-->
	<el-dialog title="查看评价" v-model="dialogFormVisible">
		<el-form label-width="120px">
			<el-form-item label="评价时间：">
				<span>{{ f.evaluateTime }}</span>
			</el-form-item>
			<el-form-item label="评价星级：">
				<span>{{ f.evaluateStar }}星</span>
			</el-form-item>
			<el-form-item label="评价内容：">
				<span>{{ f.evaluateContent }}</span>
			</el-form-item>
			<el-form-item label="图片：">
				<img :src="item" alt="" v-for="item in f.evaluateImage" class="img-preview" @click="previewImage(item)" style="margin-right: 10px;">
				<span v-if="f.evaluateImage==''">无</span>
			</el-form-item>
		</el-form>
	</el-dialog>
	<div class="weui-gallery" style="display: block;z-index: 9999;" v-show="img.is_preview">
		<span class="weui-gallery__img" :style="{backgroundImage:img.preview_url,transform:img.transform}" @click="hidePreview"></span>
		<div class="weui-gallery__opr white_pointer">
			<div class="weui-gallery__del" @click.prevent="rotate()">
				<img src="../../assets/images/xuanzhuan.png" height="25" width="25">
				<span class="weui-span_del">旋转</span>
			</div>
		</div>
	</div>



	</div>
</template>
<style>
	.el-table-filter__list {
		height: auto;
		max-height: 200px;
		overflow: scroll;
	}

	.box-comments {
		background: #f7f7f7;
	}

	.box-comments .comment-text {
		margin-left: 40px;
		color: #555;
	}

	.box-comments .username {
		color: #444;
		display: block;
		font-weight: 600;
	}

	.box-comments .box-comment {
		padding: 8px 0;
		border-bottom: 1px solid #eee;
	}

	.is_new_express {
		color: #fff;
		background: #c9302c;
		line-height: 30px;
		font-size: 1rem;
		padding-left: 3px;
		float: left;
		width: 30px !important;
		height: 30px !important;
	}

	.box-footer {
		border-bottom-left-radius: 3px;
		border-top: 1px solid #f4f4f4;
		padding: 10px;
	}

	.el-tabs__item {
		font-size: 16px !important;
		/* font-weight: bold; */
	}

	.select {
		display: flex;
		padding: 10px;
		align-items: center;
		justify-content: center;
	}

	.select-font {
		width: 60px;
		font-size: 18;
		margin-right: 10px;
	}

	.input1 {
		width: 250px;
		height: 15px;
	}

	.mar-20 {
		margin: 20px;
	}

	.orderListHeader {
		display: flex;
		justify-content: flex-start;
		padding: 5px 20px;
		background-color: #3C8BFB;
		color: #FFFFFF;
	}

	.orderListContent {
		display: flex;
		justify-content: flex-start;
		border-bottom: 1px solid #dcdcdc;
	}

	.contentLeft {
		display: flex;
		justify-content: flex-start;
		width: 50%;
	}

	.contentRight {
		padding: 20px;
	}

	.contentRightUserInfo {
		display: flex;
		justify-content: flex-start;
		color: #8A8A8A;
		font-size: 14px;
	}
	.orderListFont .el-form-item__label{
		  text-align: right;
		  font-size: 18px;
		  font-weight: 500;
	}
</style>
<script>
	export default {
		data() {
			return {
				table_loading: false,
				loading: false,
				loading2: false,
				formLabelWidth: '100px',
				activeNameNew: 'second',
				formInline: {
					transferId: '',
					serialNo: '',
					payType: '',
					pageNum: '',
					pageSize: 10,
					desc: 'DESC',
					sort: 'CRE_TIME',
					payUserName: '',
					storeName: '',
					buyBeginTime: '',
					buyEndTime: '',
					goodType: 0,
					newStatus: '',
					type: 'transferId',
					name: ''
				},
				pageInfo: {
					pageNum: 1,
					pageSize: 10,
					count: 1,
					dtos: []
				},
				activeName: '-1',
				dialogVisible: false,
				dialogVisible2: false,
				dialogVisible3: false,
				dialogFormVisible: false,
				form: {
					logisticsCompany: '',
					courierNo: ''
				},
				f: {
					evaluateImage: []
				},
				type: '',
				orderState: [{
					text: '待评价',
					value: '1'
				}, {
					text: '已完成',
					value: '7'
				}],
				numberObj: {
					countAllNum: 0,
					countNotEvaluateNum: 0,
					countFinishNum: 0
				},
				startTime: '',
				endTime: '',
				img: {
					is_preview: false,
					preview_url: '',
					image_index: null,
					preview_images: [],
					transform: ''
				},
			}
		},
		created() {
			this.fetchNumber()
			this.fetchData(this.pageInfo.pageNum);
		},

		mounted() {

		},
		methods: {
			fetchData(page = 1) {
				if (this.startTime && this.endTime) {
					this.formInline.buyBeginTime = dateFormat(this.startTime)
					this.formInline.buyEndTime = dateFormat(this.endTime)
					if (this.formInline.buyBeginTime > this.formInline.buyEndTime) {
						this.$message({
							type: 'warning',
							message: '开始时间不能大于结束时间'
						});
						return;
					}
				} else {
					this.formInline.buyBeginTime = ''
					this.formInline.buyEndTime = ''
				}
				if (this.startTime && !this.endTime) {
					this.$message({
						type: 'warning',
						message: '请选择结束时间'
					});
					return;
				}
				if (!this.startTime && this.endTime) {
					this.$message({
						type: 'warning',
						message: '请选择开始时间'
					});
					return;
				}
				this.table_loading = true;
				this.pageInfo.pageNum = page
				this.formInline.pageNum = page
				this.formInline.newStatus = this.activeName
				if (this.activeName == '-1') {
					this.formInline.newStatus = ''
				}
				this.formInline[this.formInline.type] = this.formInline.name
				this.dataApi.ajax('selectPagePayFaceTransferForControl', this.formInline, res => {
					this.table_loading = false;
					if (res.responseType === 'S') {
						this.pageInfo = res
						// console.log(res,'线上付')
					}
				});
			},
			fetchNumber() {
				this.dataApi.ajax('countPagePayFaceTransfer', {
					goodType: 0
				}, res => {
					if (res.responseType === 'S') {
						//this.company_list=res.data
						this.numberObj = res
					}
				});

			},
			handleCurrentChange(val) {
				this.fetchNumber()
				this.fetchData(val);
			},
			handleClick(tab) {
				this.fetchNumber()
				this.fetchData(1)

			},
			order(column) {
				if (!column.order) {
					return;
				}
				if (column.order == 'ascending') {
					this.formInline.desc = 'ASC'
				} else {
					this.formInline.desc = 'DESC'
				}
				this.fetchData(this.pageInfo.pageNum)

			},
			changeType() {
				this.formInline.transferId = ''
				this.formInline.serialNo = ''
			},
			editGold(id) {
				this.dataApi.ajax('singleShopEvaluatByExample', {
					orderId: id,
					stat: 1,
					evaluateType: 6
				}, res => {
					if (res.responseType === 'S') {
						this.dialogFormVisible = true
						this.f = res
					}
				});
			},
			previewImage(src) {
				this.img.is_preview = true;
				this.img.preview_url = `url(${src})`;
				this.img.preview_images = this.images;
				this.img.transform = '';
			},
			hidePreview() {
				this.img.is_preview = false;
				this.img.preview_url = null;
				this.img.image_index = null;
				this.img.preview_images = [];
				this.img.transform = '';
			},
			rotate() {
				if (this.img.transform == '') {
					this.img.transform = 'rotate(90deg)'
				} else if (this.img.transform == 'rotate(90deg)') {
					this.img.transform = 'rotate(180deg)'
				} else if (this.img.transform == 'rotate(180deg)') {
					this.img.transform = 'rotate(270deg)'
				} else if (this.img.transform == 'rotate(270deg)') {
					this.img.transform = ''
				}
			}

		}
	}
</script>
